<template>
  <el-card :body-style="{ padding: '15px' }" shadow="always">
    <div v-if="dataModel.id == 3" slot="header" class="flex align-center justify-between">
      <span class="text-bold text-sm">公告栏</span>
      <el-button style="float: right; padding: 3px 0" type="text">更多公告</el-button>
    </div>
    <div v-if="dataModel.id == 1" slot="header" class="flex align-center justify-between">
      <span class="text-bold text-sm">常用应用</span>
      <el-button style="float: right; padding: 3px 0" type="text"></el-button>
    </div>
    <div v-if="dataModel.id == 2" slot="header" class="flex align-center justify-between">
      <span class="text-bold text-sm">待办统计</span>
      <el-button style="float: right; padding: 3px 0" type="text"></el-button>
    </div>
    <div v-if="dataModel.id == 1" style="min-height: 300px" class="flex flex-direction justify-between">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :md="8" :lg="4" v-for="(item, index) in dataList" :key="index">
          <div style="margin-bottom: 30px;text-align: center;" @click="GoUrl(item)">
            <img :src="item.iconBase64" alt="" style="width: 48px; height: 48px;">
            <div style="color: #828689;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.appName }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-if="dataModel.id == 2" style="min-height: 300px" class="flex flex-direction justify-between">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" v-for="(item, index) in remindinfolist" :key="index">
          <div style="margin-bottom: 15px;text-align: center;margin-top: 20px;">
            <img class="icon_box" style="width:44px;height:44px;" :src="item.url" />
            <div style="color: #828689;margin-bottom: 10px;">{{ item.authName }}</div>
            <div style="color: #173E55;font-size: 20px;">{{ item.number }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-if="dataModel.id == 3" style="min-height: 295px" class="flex flex-direction justify-between">
      <el-row :gutter="20">
        <div v-for="(item, index) in notifyList" :key="index" class="text item">
          <div style="display: inline-block;">
            {{ item.msg_context }}
          </div>
          <div style="display: inline-block;float: right;">{{ item.create_time }}</div>
        </div>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import http from "@/api/login"
import api from "@/api/dispose"
export default {
  name: 'DataItem',
  props: {
    dataModel: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    img_url() {
      console.log(11, process.env.IMG_URL)
      return process.env.BASE_URL;
    },
  },
  data() {
    return {
      dataList: [
      ],
      remindinfolist: [
        {
          id: 201,
          authName: '待办事宜',
          url: "../../../../static/img/tub.png",
          number: 934
        },
        {
          id: 202,
          authName: '系统消息',
          url: "../../../..//static/img/tub2.png",
          number: 850
        },
        // {
        //   id: 203,
        //   authName: '待审核任务',
        //   url: "../../../../static/img/tub.png",
        //   number: 84
        // },
        // {
        //   id: 204,
        //   authName: '待办发文',
        //   url: "../../../../static/img/tub2.png",
        //   number: 850
        // },
        // {
        //   id: 205,
        //   authName: '待办收文',
        //   url: "../../../../static/img/tub.png",
        //   number: 312
        // },
        // {
        //   id: 206,
        //   authName: '待办触发',
        //   url: "../../../../static/img/tub2.png",
        //   number: 934
        // },
      ],
      boardlist: [
        {
          id: 301,
          boardName: '会议管理-新增钉钉应用部门',
          time: '2023/6/4'
        },
        {
          id: 302,
          boardName: '会议管理-新增钉钉应用部门应用部门应用部门',
          time: '2023/6/3',
        },
        {
          id: 303,
          boardName: '会议管理-新增钉钉应用部门应用部门应用部门应用部门',
          time: '2023/6/2',
        },
        {
          id: 304,
          boardName: '会议管理-新增',
          time: '2023/6/1',
        },
        {
          id: 305,
          boardName: '第五条数据不会显示',
          time: '2023/5/31',
        },
      ],
      notifyList: [],
    }

  }, mounted() {
    this.getAppList();
    this.getAllTz();
  },
  methods: {
    getAppList() {
      http.getAppList().then(res => {
        this.dataList = res.data

      })
    },
    getAllTz() {
      api.getNotify().then((res) => {
        // console.log(res)
        if (res.code == 200) {
          this.notifyList = res.data.data;
          for (let i = 0; i < this.notifyList.length; i++) {
            this.notifyList[i].create_time = this.formatTime(this.notifyList[i].create_time);
          }
        }
      })
    },
    formatTime(str) {
      var y = new Date(str).getFullYear();
      var m = new Date(str).getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }

      var d = new Date(str).getDay();
      if (d < 10) {
        d = "0" + d;
      }
      return y + "/" + m + "/" + d;
    },
    GoUrl(item) {
      if (item.protocol === "Basic" || item.inducer === "SP") {
        window.open(item.loginUrl);
        return;
      } else {
        window.open(
          process.env.VUE_APP_API_BASE_URL + "/sign/authz/" + item.id
        );
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.divide {
  margin: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.text {
  font-size: 14px;
}

.item {
  // margin-bottom: 25px;
  padding: 15px 0px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
